/* General stuff */
/** 
 * The page 
 */
body.ctrl { 
    margin:  0; 
    padding: 0; 
    border:  none;
}
/**
 * The master table 
 */
.control {
    margin-top: 6px;
    border-collapse: collapse;
    border-color: #333;
    border-spacing: 0;
    width: 99.9%;
}
.control tbody { 
    border-left: 1px solid #444;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}
/**
 * Generic cells in the table 
 */
.control td {
    background-color: #202020;
    vertical-align:   middle;
}
.control button {
    background-color:    #202020;
    height:              50px;
    border:              none;
    margin:              0;
    padding:             0px;
    width:               100%;
    background-repeat:   no-repeat;
    background-position: center;
}
.control button.cast {
    background-size:  32px 24px;
    display:          none;
}
/**
 * Cells with a button in
 */
.control td.button { 
    width: 70px;
}
/**
 * Cells with a time in it
 */
.control td.time { 
    width:       60px;
    text-align:  center;
    font-size:   large;
    color:       rgba(255,255,255,.75);
    font-family: gibsonRegular, Arial, sans-serif;
}

/**
 * Selects within the table 
 */
.control select {
    color:               white;
    -webkit-appearance:  none;
    font-size:           large;
    background-color:    #202020;
    height:              50px;
    border:              none;
    margin:              0;
    padding-left:        10px;
    padding-right:       10px;
    opacity:             0.75;
}    
.control select option { 
    color:               rgba(255,255,255,0.75);
    text-align:          right;
}    
/* --- Customize the seek bars ------------------------------------- */
/**
 * Container of seek bars 
 */
.control .bar, .control .topbar { 
    position: relative;
    z-index:  1000;
    /* display:  inline; */
}
.control .topbar {
    height: 15px;
    display: block;
    margin: 0;
    padding: 0;
}
/**
 * Progress bar in seek bars 
 */
.control progress { 
    /*background-color: rgba(1,1,1,0);*/
    width:            100%;
    position:         absolute;
    top:              0;
    bottom:           0;
    left:             0;
    right:            0;
    opacity:          1;
    -webkit-appearance: none;
}
.control .topbar progress { 
    height:        100%; 
    vertical-align: middle;
}
.control #seekBg::-webkit-progress-bar { 
    background-color:  #606060;
}    
.control #seekBg::-webkit-progress-value { 
    background-color:  #eb9500;
    opacity:           1;
}

/**
 * Background of range selector within seek bars. Fully transparent. 
 */
.control input[type="range"] {
    -webkit-appearance: none;
    position:           relative;
    top:                0;
    bottom:             0;
    left:               0;
    right:              0;
    background-color:   rgba(1,1,1,0);
    height:             100%;
    width:              100%; 
    cursor:             pointer;
    margin:             0;
    z-index:            10;
    border:             none;
}
.control input:focus, .control button:focus {
    outline: none;
}
.control .topbar input[type="range"] {
    position: absolute;
}
/**
 * Slider control - a circle 
 */
.control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height:             15px;
    width:              1px;
    /* border-radius:      100%; */
    cursor:             pointer;
    /* background:         #aaa; */
    /* border:             2px solid #444; */
    color:              transparent;
    border-radius:      0;
    border:             none;
    vertical-align:     middle;    
}
/** 
 * Slider control - a thin line 
 */
.control input[type="range"]#audio::-webkit-slider-thumb {
    height:             24px;
}

/* --- Specific cells ---------------------------------------------- */
/** 
 * Volume cell 
 */
.control td#volumeCell {
    width:   40px;
}
.control #audioBar { 
    height: 24px;
}
.control #audioBg { 
    width:   100%;
    height:  100%;
    display: block;
    -webkit-appearance: none;
    opacity: 0.8;
    vertical-align: middle;
}
.control #audioBg::-webkit-progress-bar { 
    background-color:  transparent;
    background-repeat: no-repeat;
    background-size:   100% 100%;
    background-image:  linear-gradient(to right, 
				       #606060       0%,
				       #606060      10%, 
				       transparent  10%,
				       transparent  22%,
				       #606060      22%,
				       #606060      34%, 
				       transparent  34%,
				       transparent  46%,
				       #606060      46%,
				       #606060      56%, 
				       transparent  56%,
				       transparent  68%,
				       #606060      68%,
				       #606060      78%, 
				       transparent  78%,
				       transparent  90%,
				       #606060      90%,
				       #606060     100%);
}
.control #audioBg::-webkit-progress-value { 
    background-color:  transparent;
    background-repeat: repeat-x;
    /* Adjust width of element according to these values (5bars, 4spaces) */
    background-size:   9px 100%;				 
    background-image:  linear-gradient(to right, 
				       white         0px,  /* Start bar   */
				       white         4px,  /* End bar     */
				       transparent   4px,  /* Start space */
				       transparent   9px); /* End space   */

}


/** 
 * The rate cell 
 */
.control td#rateCell {
    font-family: gibsonRegular, Arial, sans-serif;
    width:       75px;
}
/**
 * State cell 
 */
.control td#state { 
    font-family:      gibsonRegular, Arial, sans-serif;
    font-size:        smaller;
    background-color: #fff;
    border-left:      none;
    text-overflow:    ellipsis;   
    padding-left:     1ex;
}
/** 
 * File cell 
 */
.control td#file { 
    background-color: #fff;
    border-left:      none;
    text-align:       right;
    font-family:      gibsonRegular, Arial, sans-serif;
    font-size:        smaller;
    text-overflow:    ellipsis;   
    padding-right:     1ex;
}
/* --- Specific elements ------------------------------------------ */
/**
 * Play button 
 */
.control #play { 
    background-image:  url('img/dark/play.png');
    margin-left:       10px;
    width:             60px;
    display:           block;
}
.control #play:hover {
    background-image:  url('img/dark/play_hover.png');
}
.control #play:active {
    background-image:  url('img/dark/play_press.png');
}
/**
 * Pause button 
 */
.control #pause { 
    background-image:  url('img/dark/pause.png');
    display:           none;
}
.control #pause:hover {
    background-image:  url('img/dark/pause_hover.png');
}
.control #pause:active {
    background-image:  url('img/dark/pause_press.png');
}
.control #duration { 
    text-align: left;
    padding-left: 2px;
}
.control #current { 
    color:      rgba(255,255,255,.85);
    text-align: right;
}
.control #duration:before {
    content: "/"
}
.control #seekCell {
    /* height: 4px;*/
    padding: 0;
    margin: 0;
}
/**
 * AudioOn button 
 */
.control #audioOn { 
    background-image:  url('img/dark/audioOn.png');
    display:           block;
}
/**
 * AudioOff button 
 */
.control #audioOff { 
    background-image:  url('img/dark/audioOff.png');
    display:           none;
    opacity:           0.75;
}

/** 
 * ChomeCast extension active state 
 */
.control #active {
    background-image: url('img/dark/active.png');
}
/** 
 * ChomeCast extension idle state 
 */
.control #idle {
    background-image: url('img/dark/idle.png');
}
/** 
 * ChomeCast extension error state 
 */
.control #error {
    background-image: url('img/dark/error.png');
}
/** 
 * ChomeCast extension warning state 
 */
.control #warning {
    background-image: url('img/dark/warning.png');
}
/** 
 * ChomeCast extension unknown state 
 */
.control #unknown {
    background-image: url('img/dark/idle.png');
    opacity:          0.5;
    display:          block;
}
.control option[value="high"] { font-size: x-large; }
.control option[value="medium"] { font-size: larger; }
.control option[value="low"] { font-size: large; }
.control option[value="tiny"] { font-size: normal; }

/*
 * EOF
 */
